<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: HeAo
 * @LastEditTime: 2022-01-06 19:55:33
-->
<template>
  <div id="right1Container" style="height: 95%"></div>
</template>
<script>
import { Column } from "@antv/g2plot";
import moment from "moment";
import { get } from "@/utils/request.js";

export default {
  data() {
    return {
      dt: [],
    };
  },
  async created() {
    //  查询数据
    await this.loadData();
  },
  mounted() {},

  methods: {
    async loadData() {
      let url = "/dashboard/pageQueryTodayData";
      let params = {
        page: 1,
        pageSize: 20,
        engineer_id: 2,
        device_id: 22,
      };
      let resp = await get(url, params);
      let data = resp.data.list.map((item) => {
        return {
          time: moment(item.insert_time).format("hh:mm"),
          value: parseInt(item.humidity),
        };
      });
      this.dt = data;
      // 页面渲染的时候初始化图表
      this.initChart();
    },

    // 查询统计数据 ajax 异步的javascript和xml
    initChart() {
      const data = JSON.parse(JSON.stringify(this.dt));
      const paletteSemanticRed = "#F4664A";
      const brandColor = "#5B8FF9";
      const columnPlot = new Column("right1Container", {
        data,
        xField: "time",
        yField: "value",
        color: "#20B2AA",
        color: ({ value }) => {
          if (value < 0.05) {
            return paletteSemanticRed;
          }
          return brandColor;
        },
        legend: false,
        xAxis: {
          label: {
            style: {
              fill: "white",
            },
          },
        },
        yAxis: {
          label: {
            style: {
              fill: "white",
            },
          },

          grid: {
            line: {
              // 设置辅助线样式
              style: {
                lineDash: [2, 3], // 虚线配置，第一个值为虚线每个分段的长度，第二个值为分段
                strokeOpacity: 0.2, // 辅助线透明度
              },
            },
          },
        },
        tooltip: {
          showMarkers: false, // 列表前面标点
          domStyles: {
            "g2-tooltip": {
              // 背景框样式
              padding: "10px",
              background: "rgba(72,169,235,0.8)",
              border: "1px solid #00FFFF",
              color: "#FFFFFF",
              fontFamily: "微软雅黑",
            },
          },
        },
        meta: {
          value: {
            alias: "humidity",
          },
          time: {
            alias: "时间",
          },
        },
      });
      columnPlot.render();
      //3.执行绘画渲染
      setInterval(() => {
        columnPlot.changeData(
          data.map((d) => ({ ...d, value: d.value * Math.random() }))
        );
      }, 1200);
    },
  },
};
</script>
